<template>
	<view class="contnet">
		<view class="top_img_box" :style="{backgroundImage:'url('+picture.getImgUrl(InfoList.background)+')'}">
			<image class="top_avatar" :src="picture.getImgUrl(InfoList.image)"></image>
		</view>
		<view class="list_btm_box">
			<view class="list_btm_item">
				<image src="../../static/image/kqfx_ico_sc_sel@2x.png" mode="" v-if="InfoList.is_collect==1"
					@click="ClickSc(InfoList.is_collect)"></image>
				<image src="../../static/image/jyjq_ico_sc@2x.png" mode="" v-else @click="ClickSc(InfoList.is_collect)">
				</image>
				{{InfoList.is_collect}}
			</view>
			<view class="list_btm_item">
				<image src="../../static/image/kqfx_ico_dz_sel@2x.png" mode="" v-if="InfoList.is_like==1"
					@click="ClickDz(InfoList.is_like)"></image>
				<image src="../../static/image/sy_ico_dz@2x.png" mode="" v-else @click="ClickDz(InfoList.is_like)">
				</image>
				{{InfoList.is_like}}
			</view>
			<view class="list_btm_item">
				<image src="../../static/image/zpzx_ico_yd@2x.png" mode=""></image>
				{{InfoList.watch_num}}
			</view>
			<!-- <view class="list_btm_item">
				<image src="../../static/image/kqfx_ico_llrc@2x.png" mode=""></image>5000
			</view> -->
		</view>
		<view class="item_box">
			<view class="item_box_title">
				<view class="item_box_line"></view>考情分析
			</view>
			<view class="item_box_con" v-html="InfoList.analysis">
				<!-- {{InfoList.analysis}} -->
			</view>
		</view>
		<view class="item_box">
			<view class="item_box_title">
				<view class="item_box_line"></view>公司概况
			</view>
			<view class="item_box_con" v-html="InfoList.survey">
				<!-- {{InfoList.survey}} -->
			</view>
		</view>
		<view class="item_box">
			<view class="item_box_title">
				<view class="item_box_line"></view>最新动态
			</view>
			<view class="item_box_con" v-html="InfoList.dynamic">
				<!-- {{InfoList.dynamic}} -->
			</view>
		</view>
		<view class="item_box">
			<view class="item_box_title1">
				<view class="item_box_title_l">
					<view class="item_box_line"></view>学员评价({{InfoList.evaluate_num}})
				</view>
				<view class="item_box_title_r">
					<view class="item_box_fens">{{InfoList.score}}</view>
					<view class="item_box_tip">综合得分</view>
				</view>
			</view>
			<view class="news_bottom" v-for="(item,index) in comList" :key="index+'b'">
				<view class="news_user1">
					<image :src=" picture.getImgUrl(item.user.avatar)" mode=""></image>
					<view class="ev_user_box">
						<view class="news_user_name">{{item.user.nickname}}</view>
						<view class="ev_time">{{item.createtime}}</view>
					</view>
				</view>
				<view class="ev_start_box">
					<image src="../../static/image/mqfx_ico_pj__nor@2x.png" mode="" v-for="(item,index) in item.score"
						:key="index"></image>
					<image src="../../static/image/ico_img_str_nor@2x.png" mode="" v-for="(item,index) in 5-item.score"
						:key="'m'+index"></image>
				</view>
				<view class="news_content1">{{item.evaluate}}</view>
			</view>
		</view>
		<view class="item_box1">
			<view class="item_box_title">
				<view class="item_box_line"></view>套餐选择
			</view>
			<view class="item_box_con">
				<view class="con_tabber_box">
					<view class="tabber_item" :class="{'itemactive':tabberitem==1}" @click="clickTab(1)">笔试/面试套餐</view>
					<view class="tabber_item" :class="{'itemactive':tabberitem==2}" @click="clickTab(2)">助攻套餐</view>
				</view>
				<!-- 笔试面试 -->
				<view class="item_con_item" v-for="(item,index) in CurList" :key="index" v-show="tabberitem==1"
					@click='godetail(item.id)'>
					<view class="item_con_item_l">
						<image :src="picture.getImgUrl(item.image)" mode=""></image>
					</view>
					<view class="item_con_item_r">
						<view class="item_con_title">{{item.name}}</view>
						<view class="item_con_info">
							<view class="item_con_info_l">
								<image src="../../static/image/ss_ico_xx@2x.png" mode=""></image>{{item.buy_num}}人已学习
							</view>
							<view class="item_con_info_r">
								<text style="font-size: 24rpx;">￥</text>{{item.now_price}}
							</view>
						</view>
					</view>
				</view>
				<!-- 助攻 -->
				<view class="item_con_item" v-for="(item,index) in AssistsList" :key="index+'a'" v-show="tabberitem==2"
					@click="goZugong(item.id)">
					<view class="item_con_item_l">
						<image :src="picture.getImgUrl(item.image)" mode=""></image>
					</view>
					<view class="item_con_item_r">
						<view class="item_con_title">{{item.name}}</view>
						<view class="item_con_info">
							<view class="item_con_info_l">
								<image src="../../static/image/ss_ico_xx@2x.png" mode=""></image>{{item.num}}人已学习
							</view>
							<view class="item_con_info_r">
								<text style="font-size: 24rpx;">￥</text>{{item.price}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btm_line"></view>
		<view class="btm_box">
			<view class="btm_item" @click="showModal1" data-target="Modal1">
				<image src="../../static/image/mqpj_ico_pj_h@2x.png" mode=""></image>
				<view class="btm_tip">评价</view>
			</view>
			<view class="btm_item" @click="goTiWen">
				<image src="../../static/image/mqpj_ico_tw@2x.png" mode=""></image>
				<view class="btm_tip">提问</view>
			</view>
			<view class="btm_item" @click="goMsg">
				<image src="../../static/image/mqpj_ico_tw@2x(1).png" mode=""></image>
				<view class="btm_tip">留言</view>
			</view>
		</view>
		<!-- 名企评价弹窗 -->
		<view class="cu-modal" :class="modalName1=='Modal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu_title">
					<view></view>
					<view class="text-bold cu-item-title1">名企评价</view>
					<view class="action1">
					</view>
				</view>
				<view class="padding_xl">
					<view class="cu_start_box">
						<!-- <image src="../../static/image/mqfx_ico_pj__nor@2x.png" mode="" v-for="(item,index) in 4" :key="index"></image>
						<image src="../../static/image/ico_img_str_nor@2x.png" mode=""  ></image> -->
						<uni-rate :size="18" :value="0" @change="onChange" />
					</view>
					<view class="cu_text_area">
						<textarea value="text" placeholder="请输入对该企业的评价" v-model="comment" class="text_area_class"
							placeholder-class="input_class" />
					</view>
				</view>
				<view class="button">
					<view class="cu_btn" @click="SubmitCom">确认提交</view>
				</view>
			</view>
			<image class="cu_close" src="../../static/image/xx_tc_close.png" mode="" @click="hideModal1"></image>
		</view>
		<!-- 不能评价弹窗 -->
		<view class="cu-modal" :class="ShowDialog?'show':''">
			<view class="cu-dialog">
				<view class="cu_title">
					<view></view>
					<view class="text-bold cu-item-title1">提示</view>
					<view class="action1">
						<!-- <image src="../../static/image/ico_ts_gb@2x.png" mode=""></image> -->
					</view>
				</view>
				<view class="padding_xl1">
					<view class="cu_tip">您还未报名该企业下的课程，无法评价</view>
				</view>
				<view class="button">
					<view class="cu_btn" @click="showModal">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		CompayLike,
		CancelLike,
		Cancollect,
		Cancelcollect,
		companydetail,
		companyevaluate,
		companyevaluatelist
	} from '@/api/data.js'
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	import uniSection from '@/components/uni-section/uni-section.vue'
	export default {
		components: {
			uniRate,
			uniSection
		},
		data() {
			return {
				tabberitem: 1,
				itemDz: 1,
				itemSc: 1,
				modalName1: null,
				modalName: null,
				product_star: '',
				id: '',
				InfoList: [],
				AssistsList: [],
				CurList: [],
				comment: '',
				comList: '',
				ShowDialog: false

			}
		},
		onLoad(option) {
			this.id = option.id
			this.getInfo()
			this.getCom()
		},
		methods: {
			godetail(id) { //这里改跳转详情吧
				uni.navigateTo({
					url: '../data/kecheng?id=' + id
				})
			},
			goZugong(id) {
				uni.navigateTo({
					url: '../data/kechengZg?id=' + id
				})
			},
			clickTab(val) { //切换状态就要请求接口
				this.tabberitem = val
				// 1.面试,笔试套餐
				// 2.助攻套餐
			},
			ClickDz(val) {
				if (val == 0) {
					var obj = {
						c_id: this.id
					};
					CompayLike(obj).then(res => {
						if (res.code == 1) {
							this.$msg(res.msg)
							this.getInfo()
						} else {
							this.$msg(res.msg)
						}
					});
				} else {
					var obj = {
						c_id: this.id
					};
					CancelLike(obj).then(res => {
						if (res.code == 1) {
							this.$msg(res.msg)
							this.getInfo()
						} else {
							this.$msg(res.msg)
						}
					});
				}
			},
			ClickSc(val) {
				if (val == 0) {
					var obj = {
						c_id: this.id
					};
					Cancollect(obj).then(res => {
						if (res.code == 1) {
							this.$msg(res.msg)
							this.getInfo()
						} else {
							this.$msg(res.msg)
						}
					});
				} else {
					var obj = {
						c_id: this.id
					};
					cancelcollect(obj).then(res => {
						if (res.code == 1) {
							this.$msg(res.msg)
							this.getInfo()
						} else {
							this.$msg(res.msg)
						}
					});
				}
			},
			showModal1(e) {
				this.modalName1 = e.currentTarget.dataset.target
				console.log(e)
			},
			hideModal1(e) {
				this.modalName1 = null
			},
			showModal() {
				this.ShowDialog = !this.ShowDialog
			},
			hideModal(e) {
				this.modalName = null
			},
			// 星星
			onChange(e) {
				this.product_star = JSON.parse(JSON.stringify(e)).value
				console.log(this.product_star)
			},
			goTiWen() {
				uni.navigateTo({
					url: 'Tiwen?id=' + this.id
				})
			},
			goMsg() {
				uni.navigateTo({
					url: 'leavingMsg?id=' + this.id
				})
			},
			getInfo() {
				var obj = {
					c_id: this.id
				};
				companydetail(obj).then(res => {
					if (res.code == 1) {
						this.InfoList = res.data
						if (this.InfoList.assists_list.length != 0) {
							this.AssistsList = this.InfoList.assists_list
						}
						if (this.InfoList.curriculum_list.length != 0) {
							this.CurList = this.InfoList.curriculum_list
						}
					}
				});
			},
			// 提交评价
			SubmitCom() {
				var obj = {
					c_id: this.id,
					score: this.product_star,
					evaluate: this.comment
				};
				companyevaluate(obj).then(res => {
					if (res.code == 1) {
						this.getCom()
						this.getInfo()

					} else {
						this.hideModal1()
						this.showModal()
					}
					// this.$api.msg(res.data.msg)

				});
			},
			// 获取评价列表
			getCom() {
				var obj = {
					c_id: this.id,
					page: 1,
					limit: 5
				};
				companyevaluatelist(obj).then(res => {
					if (res.code == 1) {
						this.comList = res.data
					}
				});
			}



		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
	}

	.top_img_box {
		width: 100%;
		height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* background-image: url(../../static/image/mqfx_img_bg@2x.png); */
		/* background-image: url(../../static/image/mqfx_img_yh@2x.png); */
		background-size: 100% 100%;
		/* -webkit-filter: blur(8px); */
		/* background: #000000; */
		/* opacity: 0.8; */
	}

	.top_avatar {
		width: 150rpx;
		height: 150rpx;
		background-color: #F5F5F5;
		border-radius: 50%;
	}

	.list_btm_box {
		width: 100%;
		height: 80rpx;
		padding: 0 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
	}

	.list_btm_item {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		align-items: center;
	}

	.list_btm_item image {
		width: 28rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}

	.item_box {
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding-bottom: 30rpx;
	}

	.item_box1 {
		padding: 0 30rpx;
		padding-top: 30rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}


	.item_box_title {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
	}

	.item_box_title1 {

		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 25rpx;
	}

	.item_box_title_l {
		display: flex;
		align-items: center;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.item_box_line {
		width: 4rpx;
		height: 20rpx;
		background: #FFDD47;
		border-radius: 2rpx;
		margin-right: 10rpx;
	}

	.item_box_fens {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF3B30;
	}

	.item_box_tip {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.item_box_title_r {
		text-align: center;
	}

	.news_bottom {
		width: 100%;
		height: auto;
		/* padding-top: 15rpx; */
	}

	.news_user1 {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.news_user1 image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.news_user_name {
		margin-left: 20rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.ev_time {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-left: 20rpx;
	}

	.ev_start_box {
		width: 100%;
		height: 50rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.ev_start_box image {
		width: 28rpx;
		height: 26rpx;
		margin-right: 12rpx;
	}

	.btm_line {
		height: 140rpx;
		width: 100%;
	}

	.con_tabber_box {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-bottom: 15rpx;
	}

	.tabber_item {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-right: 60rpx;
	}

	.itemactive {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-right: 60rpx;
	}

	.item_con_item {
		width: 100%;
		height: 170rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.item_con_item_l image {
		width: 196rpx;
		height: 130rpx;
		border-radius: 10rpx;
	}

	.item_con_item_r {
		margin-left: 20rpx;
		height: 170rpx;
		padding-top: 15rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}

	.item_con_info_l image {
		width: 28rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}

	.item_con_info_l {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.item_con_title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.item_con_info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}

	.item_con_info_r {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF3B30;
	}

	.btm_box {
		width: 100%;
		height: 98rpx;
		padding: 0 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		border-top: 1rpx solid #E5E5E5;
	}

	.btm_item image {
		width: 48rpx;
		height: 44rpx;
	}

	.btm_tip {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	/* 企业评价弹窗 */
	.cu-dialog {
		width: 570rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 10rpx;
	}

	.cu-item-title {
		font-size: 32rpx;
	}

	.cu-item-title1 {
		width: 100%;
		font-size: 32rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.action1 {
		/* position: absolute;
		top:420rpx; */

	}

	.cu_title {
		width: 100%;
		height: 80rpx;
		padding: 0rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #F5F5F5;

	}

	.button {
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cu_btn {
		width: 300rpx;
		height: 60rpx;
		background: #FFDD47;
		border-radius: 6rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.padding_xl {
		width: 100%;
		height: 245rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.padding_xl1 {
		width: 100%;
		padding: 45rpx 0;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.cu_start_box {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cu_start_box image {
		width: 39rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}

	.cu_text_area {
		width: 509rpx;
		height: 140rpx;
		background: #F2F2F2;
		padding: 20rpx 20rpx;
	}

	.text_area_class {
		width: 100%;
		height: 100%;
		text-align: left;
		font-size: 26rpx;
	}

	.input_class {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.cu_close {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		bottom: 25%;
		right: 45%;
	}

	.action1 image {
		width: 29rpx;
		height: 29rpx;

	}

	.cu_tip {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}
	.cu-dialog {
	    position: relative;
	    display: inline-block;
	    vertical-align: middle;
	    margin-left: auto;
	    margin-right: auto;
	    width: 285px;
	    max-width: 100%;
	    background-color: #f8f8f8;
	    border-radius: 5px;
	    overflow: hidden;
	}
</style>
